<template>
  <wd-popup
    :model-value="show && !!product"
    custom-style="padding-top: 24rpx;background:white;border-radius: 16rpx 16rpx 0 0"
    safe-area-inset-bottom
    position="bottom"
    transition="slide-up"
    @update:model-value="$emit('update:show', $event)"
  >
    <view v-if="step === 1" class="back-button" @click="step = 0">
      <wd-icon name="arrow-left" size="36rpx" color="#333333" />
    </view>
    <view class="close-button" @click="$emit('update:show', false)">
      <wd-icon name="close" size="36rpx" color="#333333" />
    </view>
    <view class="title">
      {{ title }}
    </view>
    <template v-if="step === 0">
      <view
        v-for="item in types"
        :key="item.main"
        class="picker-item"
        :class="{
          disabled:
            item.value === 'SALE_RETURN' &&
            order.shipping_status === 'UNSHIPPED'
        }"
        @click="changeType(item)"
      >
        <view class="picker-content">
          <view class="main">
            {{ item.main }}
          </view>
          <view v-if="item.sub" class="sub">
            {{ item.sub }}
          </view>
        </view>
        <v-icon
          v-if="type === item.value"
          size="30rpx"
          :custom-style="{ marginTop: '20rpx' }"
          src="@/static/icons/order-details-picker-check.svg"
        />
      </view>
    </template>
    <template v-else-if="step === 1">
      <view
        v-for="item in reasons[type]"
        :key="item"
        class="picker-item reason"
        @click="reason = item"
      >
        <view class="picker-content">
          <view class="main">
            {{ item }}
          </view>
        </view>
        <v-icon
          v-if="reason === item"
          size="30rpx"
          :custom-style="{ marginTop: '20rpx' }"
          src="@/static/icons/order-details-picker-check.svg"
        />
      </view>
    </template>
    <view class="submit-button-container">
      <v-button
        type="primary"
        :custom-style="{ height: '80rpx' }"
        @click="submitHandle"
      >
        确定
      </v-button>
    </view>
  </wd-popup>
</template>

<script setup lang="ts">
const props = defineProps<{
  show: boolean;
  order: OrderVO;
  product?: OrderDetailVO;
}>();

const emits = defineEmits<{
  'update:show': [val: boolean];
}>();

const step = ref(0);
const title = computed(() => {
  return step.value === 0 ? '选择售后类型' : '选择售后原因';
});

const product = toRef(props, 'product');
const order = toRef(props, 'order');

const type = ref<'BARTER' | 'REFUND' | 'SALE_RETURN'>('REFUND');
const reason = ref('多拍/错拍/不想要');

const types = [
  // { main: '退货换货', sub: '', value: 'BARTER' },
  {
    main: '仅退款',
    sub: '未收到货，或与商家协商一致后不退货，仅退款',
    value: 'REFUND'
  },
  { main: '退货退款', sub: '已收到货，需要退货后可退款', value: 'SALE_RETURN' }
] as const;

const reasons = {
  BARTER: [],
  REFUND: [
    '多拍/错拍/不想要',
    '空包裹',
    '未按约定时间发货',
    '快递/物流一直未送到',
    '快递/物流无跟踪记录',
    '货物破损已拒签',
    '其他'
  ],
  SALE_RETURN: [
    '退运费',
    '尺寸拍错/不喜欢/效果不好',
    '少发/漏发',
    '质量问题',
    '货物与描述不符',
    '未按约定时间发货',
    '发票问题',
    '卖家发错货',
    '假冒品牌',
    '其他'
  ]
};

const changeType = (item: (typeof types)[number]) => {
  if (item.value === 'SALE_RETURN' && order.value.status === 'PAID') {
    return;
  }
  type.value = item.value;
};

watch(
  () => props.show,
  (val) => {
    if (val) {
      step.value = 0;
      type.value = 'REFUND';
      reason.value = '多拍/错拍/不想要';
    }
  }
);

const submitHandle = () => {
  if (step.value === 0) {
    step.value = 1;
  } else {
    applyAfterSale();
  }
};
const applyAfterSale = () => {
  const pageStore = $store.page();
  pageStore.setParameters({
    id: order.value.id,
    type: type.value,
    reason: reason.value,
    product: product.value
  });
  emits('update:show', false);
  uni.navigateTo({ url: '/pages/aftersales/aftersales-apply' });
};
</script>

<style lang="scss" scoped>
.back-button {
  position: absolute;
  top: 36rpx;
  left: 36rpx;
  z-index: 1;
}
.close-button {
  position: absolute;
  top: 36rpx;
  right: 36rpx;
  z-index: 1;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  line-height: 60rpx;
  text-align: center;
}

.picker-item {
  height: 120rpx;
  padding: 0 24rpx;
  display: flex;
  align-items: center;
  .picker-content {
    flex: 1;
    min-width: 0;
    .main {
      font-weight: bold;
    }
    .sub {
      font-size: 24rpx;
      color: #999999;
    }
  }
  &.reason {
    height: 90rpx;
  }
  &.disabled {
    opacity: 0.5;
  }
}

.submit-button-container {
  margin: 24rpx;
  padding: 10rpx 0;
}
</style>
